Bootstrap

Bootstrap 簡介

Bootstrap 官方網站， front-end open source toolkit。Bootstrap

簡單地說，Bootstrap 提供一堆寫好的 css 與 js。將他寫好的東西引入進來，就會將我的元件變得很漂亮。

值得一提的是 Bootstrap 內件是沒有 ajax，如果要用 ajax 要將 js slim 版本換成完整功能的版本。 slim 版本有將一些功能砍掉，檔案變得比較小。

如何使用 Bootstrap

依照官方文件指示，先將 css 貼上，引用後他會預設幫你調整一些東西。所以如果將相對應的 class 拿掉，會發現跟原本的還是不一樣。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

components 可以看到 bootstrap 提供的各個 ui 元件。

<button type="button" class="btn btn-primary">Primary</button>

可以藉由看文件知道他是不是 bootstrap 的 class name。

一樣可以搭配 jQuery

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <title>BootStrap</title>
    <script>
        $(document).ready(() => {
          $('.btn').click(() => $('.alert').show())
        })
    </script>
</head>
<body>
    <div style="display: none" class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
  </div>
    <button type="button"  class="btn btn-primary">Primary</button>

</body>

有些效果，例如 : dropdown，需要引入 js。一般來說放在 body 最下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <title>BootStrap</title>
</head>
<body>
    <div style="display: none" class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
  </div>
    <button type="button"  class="btn btn-primary">Primary</button>
    <div class="btn-group">
      <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Action
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

此外，也有各種 utilities 的 class，可以方便我們調格式。這種寫法有幾種名稱，名稱一號 : utilities css，名稱二號 : atomic css，名稱三號 : functional css。好處是 : 不需要自己寫 css，只要加一堆 className 就好了

Bootstrap 的網格系統

先備知識 : 網格系統

會將一行分成固定欄數，每一欄等寬，格子與格子間有 margin。這樣的好處是比例漂亮、rwd layout 調整方便。

bootstrap 實做 rwd

  <div class="container">
    <div class="row">
        <div class="col-4">
            <div class="box">box1</div>
        </div>
        <div class="col-4">
            <div class="box">box2</div>
        </div>
        <div class="col-4">
            <div class="box">box3</div>
        </div>
    </div>
  </div>

平板以下佔 12 欄，平板以上佔四欄

<div class="col-12 col-md-4">

offset 介紹

可以指定他的位置，從哪一格開始佔到第幾格。有點類似 css grid。
舉例：佔三欄，但偏移三欄

.col-md-3 .offset-md-3

bootstrap 有哪些元件 ?

alert : 跳通知，可以搭配 dismiss (可以透過 js 或屬性方式控制開關)
badge : 跟 tag 概念差不多
breadcrumb : 麵包屑
button/button group
card
carousel
collapse
dropdown
forms (常用)
input groups
media objects
modal (常用)，點了之後會跳彈窗出來
nav/ navbar
Pagination (分頁功能)
Popovers
Progress (進度條)
Scrollspy
spinner (loading 的等待時間)
toast (適合用在 ui 的提醒)
Tooltips (滑鼠移上去就出現的提醒)

重點

bootstrap 是一個工具包，可以利用裡面的東西組合起來開發成自己的網站

bootstrap 還是原生的 html 元素，只是加上自己設計的 className 還有一些 tag，這些 tag 有些是給 bootstrap 用，有些是給瀏覽器用。
bootstrap 裡的原件，有些需要先引入 css 有些則是需要 js
bootstrap 網格系統，可以寫在不同的解析度要怎麼安排他的位置。
utilities class 可以不用寫 css 就有 css 的效果
theming 可以達到客製化效果，相關參考 : bootswatch